<template>
  <div class="aaa">
    <div class="box">
      <div class="title_box">
        <div class="back"><img src="222.png" alt="" /></div>
        <div class="title">交 易</div>
        <el-button @click="login()">登录</el-button>
      </div>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">交易所</div>
        <div class="getdata">{{ exchange }}</div>
      </div>
      <div class="text1">
        <div class="header">品种代码</div>
        <div class="getdata" style="color: red">{{ varietyCode }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">品种名称</div>
        <div class="getdata" style="color: red">{{ varietyName }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">策略名称</div>
        <div class="getdata" style="color: yellow">{{ policyName }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">策略周期</div>
        <div class="getdata">{{ strategyCycle }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">持仓状态</div>
        <div class="getdata">{{ positionStatus }}</div>
      </div>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">最新价</div>
        <div class="getdata" style="color: yellow">{{ newPrice }}</div>
      </div>
      <div class="text1">
        <div class="header">持仓市值</div>
        <div class="getdata" style="color: yellow">
          {{ newPrice * openingNumber }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">浮动盈亏（%）</div>
        <div class="getdata" style="color: yellow">2</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">浮动盈亏</div>
        <div class="getdata" style="color: yellow">{{ floatingPL }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">持仓时长</div>
        <div class="getdata">{{ positionDuration }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">记录序号</div>
        <div class="getdata">{{ recordNumber }}</div>
      </div>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">开仓委托价</div>
        <div class="getdata">{{ openingCommissionPrice }}</div>
      </div>
      <div class="text1">
        <div class="header">开仓成交价</div>
        <div class="getdata">{{ openingTransactionPrice }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓数量</div>
        <div class="getdata">{{ openingNumber }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">手续费</div>
        <div class="getdata">{{}}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓方向</div>
        <div class="getdata" style="color: yellow">{{ openingMethod }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓时间</div>
        <div class="getdata">{{ openingTime1 }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">开仓方式</div>
        <div class="getdata">{{ openingMethod }}</div>
      </div>
      <div class="text1">
        <div class="header">平仓方式</div>
        <div class="getdata">{{ closingMethod }}</div>
      </div>
      <div class="text1">
        <div class="header">目标盈利价</div>
        <div class="getdata">{{ targetProfitPrice }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">目标止损价</div>
        <div class="getdata">{{ targetStopPrice }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓委托价</div>
        <div class="getdata">{{ closingCommissionPrice }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓成交价</div>
        <div class="getdata">{{ closingPrice }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓数量</div>
        <div class="getdata">{{ closingNumber }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓时间</div>
        <div class="getdata">{{ closingTime2 }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">累计分红（股）</div>
        <div class="getdata"></div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">累计派息（元）</div>
        <div class="getdata"></div>
      </div>
    </div>
    <div class="shadow"></div>
    <div class="previousPage">
      <img class="page" src="上一页.png" alt="" />
    </div>
    <div class="nextPage"><img class="page" src="下一页.png" alt="" /></div>
  </div>
</template>
<script>
import { createSocket } from '../assets/js/websocket.js'
export default {
  methods: {
    login() {
      createSocket('ws://175.27.243.236:6060/test')
    }
  }
}
</script>
<style Lang="less" scoped>
.aaa {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  flex-direction: column;
  background-color: #0e0c22;
}
.title_box {
  height: 98.000025px;
  align-items: center;
  background-color: black;
  width: 750px;
  display: flex;
  flex-direction: row;
}
.back {
  margin-left: 30px;
}
.title {
  color: #00ffff;
  margin: 9.999975px auto 9.999975px auto;
  font-size: 44.000025px;
}
.text1 {
  display: flex;
  flex-direction: row;
  font-size: 32.000025px;
}
.header {
  text-align: left;
  width: 50%;
  color: #ffffff;
  margin-top: 20.000025px;
  margin-left: 39.999975px;
  margin-bottom: 20.000025px;
  letter-spacing: 3.999975px;
  font-family: '苹方';
}
.getdata {
  width: 50%;
  text-align: center;
  color: #ffffff;
  margin-top: 20.000025px;
  margin-bottom: 20.000025px;
  margin-right: 39.999975px;
  letter-spacing: 3.999975px;
  font-family: '苹方';
}
.el-divider {
  width: 90%;
  margin: 0 39.999975px;
  background-color: #373548;
}
.previousPage {
  width: 105px;
  height: 81px;
  background: #457ffd;
  position: fixed;
  top: 1125px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20.000025px;
  margin-left: -548.000025px;
}
.nextPage {
  width: 105px;
  height: 81px;
  background: #457ffd;
  position: fixed;
  top: 1125px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20.000025px;
  margin-right: -548.000025px;
}
.page {
  width: 24.999975px;
  height: auto;
}
.shadow {
  width: 750px;
  height: 100%;
  position: fixed;
  top: 999.999975px;
  background: linear-gradient(
    rgba(14, 12, 34, 0) 0,
    rgba(14, 12, 34, 0.5) 10%,
    rgba(14, 12, 34, 1) 100%
  );
}
</style>
